<template>
  <div class="login_container">
    <h1>苏赛6fjdsopp</h1>
    <div class="login_box">
      <h2>薪资管理信息系统</h2>
      <h2>Salary Management System</h2>
      <img src="./images/login.png" alt="" />
    </div>
    <div class="login_form">
      <p>用户登录<span>USER LOGIN</span></p>
      <el-form
        :model="loginForm"
        status-icon
        :rules="rules"
        ref="loginForm"
        class="demo-loginForm"
      >
        <el-form-item prop="account">
          <el-input
            v-model="loginForm.account"
            autocomplete="off"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            autocomplete="off"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="verifyCode">
          <el-row :gutter="10">
            <el-col :span="16"
              ><el-input
                v-model="loginForm.verifyCode"
                placeholder="验证码"
                @keyup.enter.native="submitForm"
              ></el-input
            ></el-col>
            <el-col :span="8">
              <div id="v_container"></div>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
  
  <script>
import { GVerify } from "../../assets/js/verifyCode";
export default {
  data() {
    return {
      loginForm: {
        account: "zcy123",
        password: "123456",
        verifyCode: "",
      },
      // 校验规则
      rules: {
        account: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        // 密码的校验规则
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 6, max: 8, message: "长度在6~8个字符", trigger: "blur" },
        ],
        // 校验码
        verifyCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
      },
    };
  },
  created() {},
  mounted() {
    this.verifyCode = new GVerify("v_container");
    console.log(this.verifyCode.options.code, "9999999999");
  },
  methods: {
    submitForm() {
      //  登录按钮的表单预验证
      this.$refs.loginForm.validate(async (valid) => {
        console.log(valid, "555555555555");
        if (valid) {
          if (this.verifyCode.options.code === this.loginForm.verifyCode) {
            let { data } = await this.$axios.post("/login", this.loginForm);
            console.log(data);
            if (data.code == 200) {
              sessionStorage.setItem("token", JSON.stringify(data.token));
              let obj = { ...data.user };
              sessionStorage.setItem("userdata", JSON.stringify(obj));
              console.log(data);
              sessionStorage.token = data.token;
              this.$router.push("/home/index");
              this.$message.success("登录成功");
            } else {
              this.$message.error("账号或密码错误 请重新输入");
            }
          } else {
            this.$message.error({
              title: "系统提示",
              message: "验证码输入错误",
            });
          }
        }
      });
    },
  },
};
</script>
  <style lang="scss" scoped>
.login_container {
  background: #f5f8ff;
  height: 100%;
  width: 100%;
  position: fixed;
  background-size: 100% 100%;
}
.login_box {
  color: #545fb0;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 33%;
  transform: translate(-50%, -50%);
}
.login_box img {
  margin-top: 30px;
  width: 50%;
}
.login_box :nth-child(1) {
  font-size: 28px;
}
.login_box :nth-child(2) {
  font-weight: normal;
}

.login_form p {
  padding: 12px;
}
.login_form p span {
  padding: 12px;
  font-size: 10px;
}
.login_form {
  padding: 5px;
  padding-right: 20px;
  padding-left: 20px;
  height: 390px;
  width: 350px;
  background-color: #ffffff;
  border-radius: 3px;
  position: absolute;
  top: 50%;
  left: 70%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 10px 0px #67b3dd;
}
.login_form .el-button {
  width: 100%;
}
.login_form .el-form {
  margin-top: 15px;
  position: relative;
}
.login_form .el-button {
  margin-top: 15px;
}
</style>
  